<template>
    <div class="box">
        <div class="title-box">
            <p>停放点信息</p>
        </div>
        <div class="content-box">
            <div class="restrain-box">
                <el-cascader :options="options" v-model="selectedOptions"></el-cascader>
            </div>
            <div class="input-box">
                <el-input placeholder="输入你要查询的停放点信息" v-model="queryParams.address" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
                </el-input>
            </div>

        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="地点">
                </el-table-column>
                choux <el-table-column prop="count" label="投放数" width="80">
                </el-table-column>
                <el-table-column prop="goodCount" width="80" label="良好">
                </el-table-column>
                <el-table-column prop="lowCount" width="80" label="电量不足">
                </el-table-column>
                <el-table-column prop="damageCount" label="损坏">
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">维护</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="queryParams.page"
            :page-size="queryParams.limit" layout="total, prev, pager, next" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data';
import API from "@/utils/request"
export default {
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            value: '',
            good_count: '',
            lowpower_count: '',
            damage_count: '',
            tableData: [],
            queryParams: {
                address: '',
                cityCode: "320412",
                page: 1,
                limit: 11
            },
            total: 0,
        }
    },

    methods: {
        handleClick(data) {
            console.log(data);
            this.$router.push({ name: "maintain", params: { address: data.name } });
        },
        loadLocalData() {
            API.getParksBylimit(this.queryParams, ((res) => {
                this.handleError(res);
                this.tableData = res;
            }));
            API.getParkCount(this.queryParams, ((res) => {
                this.handleError(res);

                console.log(res);
                this.total = parseInt(res.count);
            }));
        },
        handleCurrentChange() {
            API.getParksBylimit(this.queryParams, ((res) => {
                this.handleError(res);
                this.tableData = res;
            }));
        },
        query() {
            if (this.selectedOptions.length === 1)
                this.queryParams.cityCode = this.selectedOptions[0];
            if (this.selectedOptions.length === 2)
                this.queryParams.cityCode = this.selectedOptions[1];
            if (this.selectedOptions.length === 3)
                this.queryParams.cityCode = this.selectedOptions[2];
            API.getParksBylimit(this.queryParams, ((res) => {
                this.handleError(res);
                console.log(res);
                this.tableData = res;
            }));
            API.getParkCount(this.queryParams, ((res) => {
                this.handleError(res);
                this.total = parseInt(res.count);
            }));
            console.log(this.selectedOptions);
        },
        handleError(res){
            if(res.status === 30001){
                this.$message.error("登录凭证已过期，请重新登录");
                this.$router.push("/login");
            }
        }
    },
    mounted() {
        this.loadLocalData();
    }
}
</script>

<style scoped>
.box {
    position: relative;
    text-align: left;
    /* background: blue; */
}

.select-box {
    width: 130px;
    margin-right: 15px;
}

.input-box {
    margin-right: 10px;
}

.content-box {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-left: 10px;
    margin-top: 10px;
    background-color: white;
    border-radius: 5px 5px 0px 0px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>